<script setup lang="ts">
import {computed, ref} from 'vue'
import axios from "axios";
import Cookies from "js-cookie";

interface ApiSettings {
  api?: string;
  params?: {
    [key: string]: any;
  };
  config?: {
    [key: string]: any;
  };
}

const token = ref(Cookies.get('token') || Cookies.get('access_token'));

const props = withDefaults(defineProps<{
  commonApiSettings?: ApiSettings;
  statisticsApiSettings?: ApiSettings;
  toolsListApiSettings?: ApiSettings;
}>(), {
  commonApiSettings: () => ({
    api: 'https://www.china9.cn/api/app/aiToolOften',
  }),
  statisticsApiSettings: () => ({
    api: 'https://www.china9.cn/api/app/aiToolClick'
  }),
  toolsListApiSettings: () => ({
    api: 'https://www.china9.cn/api/app/getAItoolData'
  }),
})

const apiConfig = computed(() => {
  return {
    common: {
      ...props.commonApiSettings.config,
      headers: {
        'token': token.value
      }
    },
    statistics: {
      ...props.statisticsApiSettings.config,
      headers: {
        'token': token.value
      }
    },
    tools: {
      ...props.toolsListApiSettings.config,
      headers: {
        'token': token.value
      }
    }
  }
})

// 获取常用工具
const commonTools = ref<any[]>([])
const getCommonTools = () => {
  if (props.commonApiSettings.api != null) {
    axios.post(props.commonApiSettings.api, props.commonApiSettings.params, apiConfig.value.common).then((res: any) => {
      if (res.status === 200) {
        const {data} = res;
        if (data.code === 200 && data.data) {
          commonTools.value = data.data;
        } else {
          console.log('请求失败');
        }
      } else {
        console.log('请求失败');
      }
    })
  }
}
getCommonTools();

// 跳转和统计
const jump = async (item: any) => {
  let link = item.url
  if (!link.includes('http://') && !link.includes('https://')) {
    link = 'http://' + link;
  }
  window.open(link, '_blank');
  if (props.statisticsApiSettings.api != null) {
    const res1 = await axios.post(props.statisticsApiSettings.api, props.statisticsApiSettings.params, apiConfig.value.statistics);
    if (res1.status === 200) {
      getCommonTools();
    } else {
      console.log('请求失败');
    }
  }
}

// 获取工具列表
const aiTools = ref<any[]>([])
const getAiTools = () => {
  if (props.toolsListApiSettings.api != null) {
    axios.post(props.toolsListApiSettings.api, props.toolsListApiSettings.params, apiConfig.value.tools).then((res: any) => {
      if (res.status === 200) {
        const {data} = res;
        if (data.code === 200 && data.data) {
          aiTools.value = data.data;
        } else {
          console.log('请求失败');
        }
      } else {
        console.log('请求失败');
      }
    })
  }
}
getAiTools();
</script>

<template>
  <div class="ai-tools-page">
    <div v-if="commonTools.length" class="list-container">
      <div class="top-box flex">
        <div class="list-title">常用AI工具</div>
      </div>
      <div class="list-content flex-wrap">
        <div class="list-item flex" v-for="(v, i) in commonTools" :key="i">
          <a class="flex" href="javascript:;" @click="jump(v)">
            <div class="icon-box">
              <img v-if="v.icon" :src="v.icon" alt="v.title">
              <!-- 显示第一个字符的背景 -->
              <div v-else class="icon-box-bg">
                {{ v.title.substring(0, 1) }}
              </div>
            </div>
            <div class="info">
              <div :class="['name ellipsis']" :title="v.title">{{ v.title }}</div>
              <div class="desc">{{ v.content }}</div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div>
      <template v-for="(item, index) in aiTools">
        <div class="list-container">
          <div class="top-box flex">
            <div class="list-title">{{ item.title }}</div>
          </div>
          <div class="list-content flex-wrap">
            <div class="list-item flex" v-for="(v, i) in item.list" :key="i">
              <a class="flex" href="javascript:;" @click="jump(v)">
                <div class="icon-box">
                  <img v-if="v.icon" :src="v.icon" alt="v.title">
                  <!-- 显示第一个字符的背景 -->
                  <div v-else class="icon-box-bg">
                    {{ v.title.substring(0, 1) }}
                  </div>
                </div>
                <div class="info">
                  <div :class="['name ellipsis']" :title="v.title">{{ v.title }}</div>
                  <div class="desc">{{ v.content }}</div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
.ai-tools-page {
  flex: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
.ai-tools-page .list-container {
  background-color: #fff;
  margin-bottom: 16px;
  padding: 20px;
  border-radius: 10px;
}
.ai-tools-page .list-container .top-box {
  justify-content: space-between;
  margin-bottom: 15px;
}
.ai-tools-page .list-container .top-box .list-title {
  font-size: 16px;
  color: #1C2B4B;
}
.ai-tools-page .list-container .top-box .edit-box {
  width: 76px;
  height: 29px;
  background: #ffffff;
  border-radius: 15px;
  border: 1px solid #2859ff;
  justify-content: center;
  cursor: pointer;
  transition: all ease-in-out 0.3s;
}
.ai-tools-page .list-container .top-box .edit-box span {
  font-size: 12px;
  color: #2859ff;
  margin-left: 5px;
}
.ai-tools-page .list-container .top-box .edit-box.show {
  background: #eaefff;
  border-color: #eaefff;
}
.ai-tools-page .list-container .list-content .list-item {
  width: 210px;
  height: 90px;
  border-radius: 10px;
  cursor: pointer;
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 15px;
  box-sizing: border-box;
  position: relative;
  transition: all ease-in-out 0.3s;
  overflow: hidden;
  align-items: flex-start;
}
.ai-tools-page .list-container .list-content .list-item a {
  align-items: flex-start;
  width: 100%;
}
.ai-tools-page .list-container .list-content .list-item .icon-box {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  flex-shrink: 0;
}
.ai-tools-page .list-container .list-content .list-item .icon-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.ai-tools-page .list-container .list-content .list-item .icon-box-bg {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-color: #2859ff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.ai-tools-page .list-container .list-content .list-item .info {
  flex: 1;
  overflow: hidden;
}
.ai-tools-page .list-container .list-content .list-item .info .name {
  font-size: 14px;
  color: #111111;
  transition: all ease-in-out 0.3s;
  margin-bottom: 6px;
}
.ai-tools-page .list-container .list-content .list-item .info .desc {
  font-size: 12px;
  color: #666666;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ai-tools-page .list-container .list-content .list-item .add-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 6px;
  right: -20px;
  cursor: pointer;
  transition: all ease-in-out 0.3s;
}
.ai-tools-page .list-container .list-content .list-item .add-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.ai-tools-page .list-container .list-content .list-item .add-icon.show {
  right: 7px;
}
.ai-tools-page .list-container .list-content .list-item .btn-box {
  position: absolute;
  top: 6px;
  right: 7px;
}
.ai-tools-page .list-container .list-content .list-item .btn-box .btn-item {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin-left: 6px;
}
.ai-tools-page .list-container .list-content .list-item .btn-box .btn-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.ai-tools-page .list-container .list-content .list-item:hover {
  background: #f2f8fd;
}
.ai-tools-page .list-container .list-content .list-item:hover .info .name {
  color: #2859ff;
  text-decoration-line: underline;
  width: calc(100% - 12px);
}
.ai-tools-page .list-container .list-content .list-item:hover .add-icon {
  right: 7px;
}
.ai-tools-page .list-container .list-content .list-item.self-item {
  background: #f0f2f6;
  border-radius: 6px;
  border: 1px solid #e5ecff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.ai-tools-page .list-container .list-content .list-item.self-item .tips {
  font-size: 12px;
  color: #999999;
  margin-top: 4px;
}
.ai-tools-page .list-container .top-box + .list-content .list-item:hover .info .name {
  width: auto;
}
.ai-tools-page .list-container .top-box + .list-content .list-item:hover .info .name.edit-width {
  width: calc(100% - 38px);
}
</style>
